<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta content="text/html" charset="UTF-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>系统开发接口在线测试</title>
    <link href="http://apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="http://apps.bdimg.com/libs/bootstrap/3.3.4/js/bootstrap.min.js"></script>
    <!--<script type="text/javascript" src="http://cdn.bootcss.com/json2/20140204/json2.min.js"></script>-->
    <script src="//cdn.bootcss.com/jquery-json/2.5.1/jquery.json.min.js"></script>
</head>

<body>
<div class="container">
    <form role="form" class="form-horizontal">
        <table class="table table-hover">
            <tr>
                <th><a class="btn btn-default" href="{:U('apiList')}">返回</a></th>
                <th class="text-center"><?= $data['title']?></th>
            </tr>
            <?php foreach($data as $k => $v): ?>
                <tr>
                    <td><?= $k;?></td>
                    <td class="<?= $k;?>">
                        <?php if(is_array($v)){?>
                            <ul id="parameters" class="list-unstyled">
                                <?php foreach($v as $val):?>
                                    <li>
                                        <div class="form-group">
                                            <label class="col-sm-2 control-label"><?= $val?>：</label>
                                            <div class="col-sm-10">
                                                <input value="" id="<?= $val?>" class="pValue form-control" />
                                            </div>
                                        </div>
                                    </li>
                                <?php endforeach;?>
                            </ul>
                        <?php }else{ ?>
                            <?= $v?>
                        <?php } ?>
                    </td>
                </tr>
            <?php endforeach;?>
            <tr>
                <td>Test Submit</td>
                <td><input class="btn btn-primary" type="button" value="提交" onclick="return getResult();"  /></td>
            </tr>
            <tr>
                <td>Test Result</td>
                <!--<td><div id="result" style="max-height: 500px;"></div></td>-->
                <td><textarea id="result" rows="15" cols="100"></textarea></td>
            </tr>
        </table>
    </form>
</div>
<script type="text/javascript">

    /*
     * StringBuffer class
     */
    function StringBuffer() {
        this.buffer = [];
    }
    StringBuffer.prototype.append = function append (string) {
        this.buffer.push(string);
        return this;
    };
    StringBuffer.prototype.toString = function toString () {
        return this.buffer.join("");
    };
    /*
     * Strip html tags
     */
    function stripTags (str) {
        return str.replace(/<[^>].*?>/g,"");
    }
    /*
     * Display json with better look
     */
    var formatJson = function (str) {
        var tab = 0;
        var buf = new StringBuffer();
        //alert(str);
        /*var t = '&nbsp;&nbsp;&nbsp;&nbsp;';
        var n = '<br>';*/
        var t = "\t";
        var n = "\n";
        for (var i = 0; i < str.length; i++) {
            var char = str.charAt(i);

            if (char == '{' || char == '[') {
                tab++;
                char = char + n;
                for (var j = 0; j < tab; j++) char = char + t;
            }

            if (char == '}' || char == ']') {
                tab--;
                for (var j = 0; j < tab; j++) char = t + char;
                char = n + char;
            }
            if (char == ',') {
                char = char + n;
                for (var j = 0; j < tab; j++) char = char + t;
            }

            buf.append(char);
        }
        return buf.toString();
    }

    var getResult = function(){
        var data = {key:'<?= $key?>'};
        var url = $('.url').text();

        if ($('#parameters')) {
            $.each($('.pValue'), function(i, event){
                if (event.value) {
                    data[event.id] = event.value;
                };
            })
            //data = data + 'r=' + Math.random();
        };
        //alert(data);
        $.ajax({
            type: "post",
            contentType: "application/json; charset=utf-8",
            url: url,
            data: $.toJSON(data),
            dataType: "json",
            success: response
        });
        return false;
    };
    var response = function(Result){
        var str = JSON.stringify(Result);
        $('#result').html(formatJson(str));
    };



</script>

</body>
</html>
